<template>
    <div class="year">
        <div class="title">
            <p class="">年度统计</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="echart" ref="echart">

        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import *as echarts from 'echarts'

let echart=ref()
onMounted(()=>{
    let myEchart=echarts.init(echart.value)
    myEchart.setOption({
        xAxis:{
            type:'category',
            splitLine:{
                show:false
            }
        },
        yAxis:{
            type:'value',
        },
        tooltip: {
            show: true ,
            
        },
        
        series:[
            {
                type:'scatter',
                data:[42.0, 26.0, 40.0, 30.0, 13.0, 43.0, 14.0, 16.0, 15.0, 44.0, 32.0, 37.0],
                label: {
                    show: true ,
                    position:'top',
                    
                    fontSize: 15
                },
                animationDuration:2000,
                symbolSize  : 15,
                itemStyle:{
                    color:{
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'red' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    
                },
               
            }
        ]
    })
})
</script>

<style scoped lang='scss'>
.year{
    flex: 1;
    background: url('../../images/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    .title{
        margin-left: 10px;
        p{
            color: white;
            font-size: 20px;
        }
        
    }
    .echart{
        width: 100%;
        height: 90%;
    }
}
</style>